{% extends '_admin.html' %}


{% block main_contain %}
<div class="row" id="ParkingSite">
    <div class="col-lg-6">
        <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">車場設置</h3>
            </div>
            <!-- /.card-header -->
            <!-- form start -->
            <form class="form-horizontal" id="SettingForm">
              <div class="card-body">
                <div v-for="(val, key) in Settings" class="form-group row">
                    <label class="col-sm-3 col-form-label text-center">{[ ColumnName[key] ]}：</label>
                    <div class="col-sm-8">
                      <select v-if="key=='Vehicle'" v-model="Settings[key]" class="select2"
                      :name="key" style="font-size: large;width: 100%;" id="vehicles_select2">
                        {% for k, v in Vehicles.items() %}
                        <option value="{{k}}">{{v}}</option>
                        {% endfor %}
                      </select>
                      <select v-else-if="key=='Mode'" v-model="Settings[key]" class="select2"
                      :name="key" style="font-size: large;width: 100%;" id="modes_select2">
                        {% for k, v in Modes.items() %}
                        <option value="{{k}}">{{v}}</option>
                        {% endfor %}
                      </select>
                      <select v-else-if="key=='Proof'" v-model="Settings[key]" class="select2"
                      :name="key" style="font-size: large;width: 100%;" id="proofs_select2">
                        {% for k, v in Proofs.items() %}
                        <option value="{{k}}">{{v}}</option>
                        {% endfor %}
                      </select>
                      <input v-else v-model="Settings[key]" type="text" class="form-control" :name="key" style="font-size: large;">
                    </div>
                </div>
              </div>
              <!-- /.card-body -->
              <div class="card-footer text-center">
                <button type="submit" class="btn btn-info">保存設定</button>
              </div>
              <!-- /.card-footer -->
            </form>
          </div>
    </div>
</div>
{% endblock %}


{% block scripts %}
{{ super() }}
<script>
    // 系统参数
    var ParkingSite = new Vue({
        el: '#ParkingSite',
        delimiters: ['{[', ']}'],
        data: {
          Settings: {
            SiteName: '',
            Brand: '',
            Company: '',
            Address: '',
            Phone: '',
            Vehicle: [],
            Mode: [],
            Proof: [],
          },
          ColumnName: JSON.parse('{{ ColumnNameJSON|safe }}'),
        },
        methods:{
          // 初始化数据
          refresh_setting(){
            let setting = JSON.parse('{{ SiteInfoJSON|safe }}')
            for(key in this.Settings){if(setting.hasOwnProperty(key)){this.Settings[key]=setting[key]}}
            $("#vehicles_select2").val(this.Settings.Vehicle).trigger("change")
            $("#modes_select2").val(this.Settings.Mode).trigger("change")
            $("#proofs_select2").val(this.Settings.Proof).trigger("change")
          },
          // 检查选项
          identify_settings(){
            this.Settings.Vehicle = []
            this.Settings.Mode = []
            this.Settings.Proof = []
            let vehicles = $("#vehicles_select2").val()
            let modes = $("#modes_select2").val()
            let proofs = $("#proofs_select2").val()
            for(i in vehicles){if(vehicles[i]!=''){this.Settings.Vehicle.push(vehicles[i])}}
            for(i in modes){if(modes[i]!=''){this.Settings.Mode.push(modes[i])}}
            for(i in proofs){if(proofs[i]!=''){this.Settings.Proof.push(proofs[i])}}
            return this.Settings
          },
          // 提交表单
          commit_settings(){
            axios.post("{{ url_for('parking.setting') }}", {Update: this.identify_settings()})
            .then(response => {
                if(response.status==200){
                    let ret = response.data
                    AppMessage.fire({icon: ret.icon, text: ret.text})
                    if(ret.icon=='success'){setTimeout("window.location.reload()", 2000)}
                }else{AppMessage.fire({icon: 'error', text: '操作錯誤，請聯係管理員'})}
            })
            .catch(function (error) {alert(error)})
          }
        },
        mounted: function(){
          // 校验
          $('#SettingForm').validate({
            rules: {
              SiteName: {required: true},
              Brand: {required: true},
              Company: {required: true},
              Mode: {required: true},
              Proof: {required: true},
            },
            errorElement: 'span',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.col-sm-8').append(error);
            },
            highlight: function (element, errorClass, validClass) {$(element).addClass('is-invalid')},
            unhighlight: function (element, errorClass, validClass) {$(element).removeClass('is-invalid')},
            // 提交
            submitHandler: function (){
              ParkingSite.commit_settings()
            },
          });
          // 車型选择
          $("#vehicles_select2").select2({
            placeholder: '選擇車型',
            multiple: true,
            allowClear: true,
            minimumResultsForSearch: false,
            closeOnSelect: false,
            theme: 'bootstrap4'
          });
          // 模式选择
          $("#modes_select2").select2({
            placeholder: '選擇模式',
            multiple: true,
            allowClear: true,
            minimumResultsForSearch: false,
            closeOnSelect: false,
            theme: 'bootstrap4'
          });
          // 通過方式
          $("#proofs_select2").select2({
            placeholder: '通過模式',
            multiple: true,
            allowClear: true,
            minimumResultsForSearch: false,
            closeOnSelect: false,
            theme: 'bootstrap4'
          });
        }
    });
    // 加载页面数据
    ParkingSite.refresh_setting()
</script>
{% endblock %}